@import "@/common/constants/StyleConst.scss";

.treeGroup-container :deep {
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  height: inherit;
  overflow: hidden;

  &>.v-item-group {
    height: 100%;

    &>.v-expansion-panel {
      height: inherit;
    }
  }

  .header {
    min-height: 32px;
    background-color: $color-theme-blue;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    padding: 8px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .select {
      width: 100%;

      .v-input__control {
        height: 100%;
        min-height: 24px;

        .v-input__slot {
          min-height: 24px;
          height: 24px;

          label.v-label {
            top: 50%;
            transform: translateY(-50%);
          }

          .v-input__append-inner {
            margin: unset;

            .v-input__icon--clear {
              position: absolute;
              right: 6px;
              top: 0;

              .v-icon,
              .mdi-close::before {
                font-size: 16px;
              }
            }

            .v-input__icon--append {
              position: absolute;
              right: -12px;
              top: 0;
            }
          }

          .v-select__selection {
            left: 0px;
            right: auto;
            position: absolute;
            font-weight: 400;
            font-size: 12px;
          }
        }
      }
    }

    .label {
      font-size: 12px;
    }

    &.v-expansion-panel-header--active {
      .header-append {
        .v-icon {
          display: none;
        }

        .active {
          display: block;
        }
      }
    }

    .header-append {
      .v-icon::before {
        font-weight: 700;
      }

      .active {
        display: none;
      }

    }
  }

  .content {
    max-height: calc(100% - 40px);

    .v-expansion-panel-content__wrap {
      padding: unset;

      &>.v-expansion-panels {
        border-radius: unset;
      }
    }

    .group {
      height: 100%;
      overflow-x: scroll;
      overflow-x: overlay;

      .v-expansion-panel-header {
        background-color: #DFE1E8;
        border-radius: unset;
        font-weight: 700;
        height: 32px;
        min-height: unset;
      }

      .v-expansion-panel-content__wrap {
        margin: 4px 0;
        padding: unset;

        .v-treeview-node__root {
          .v-treeview-node__toggle:focus::after {
            opacity: 0;
          }
        }

        .v-treeview-node__content {
          margin: 4px 0;
          border-radius: 8px;

          .tree-item {
            background-color: $color-theme-lightgrey !important;
            border: 2px solid $color-theme-lightgrey !important;

            &.active {
              box-sizing: border-box;
              background-color: #fff !important;
              border: 2px solid $color-theme-orange !important;
            }
          }

          .v-list-item__content {
            font-size: 12px;
            text-align: left;
            padding: 8px 0;
          }

          .v-list-item__action {
            margin: 0px;
            padding-top: 8px;
            align-self: baseline;
            justify-content: flex-start;
          }
        }
      }

    }
  }

  .footer {}
}